<!-- v-if 和 v-show 的区别  -->

<script setup>
    let flag = false;
    let msg = "雷阵雨";
    let x=1;
    let y=2;


</script>

<template>
    <!-- 单分支 -->
     <div v-if="flag">今天天气不错</div>

    <!-- 单分支 两次判断 -->
    <div v-if="msg=='晴'">今天是晴天</div>
    <div v-if="msg=='阴'">今天是阴天</div>

    <hr/>

    <!-- v-if v-else 视为一组 if-else -->
    <div v-if="msg=='晴'">今天是晴天</div>
    <div v-else>今天是阴天</div>

    <hr/>

    <!-- 多分支 -->
    <!-- v-if v-else-if v-else 视为一组 if-else if-else 多分支语句 -->
    <div v-if="msg=='晴'">今天是晴天</div>
    <div v-else-if="msg=='阴'">今天是阴天</div>
    <div v-else>今天不知道是啥天气</div>

    <hr/>

    <!-- v-if 和 v-show 对比 -->
    <div v-if="true"> v-if="true"</div>
    <div v-if="false"> v-if="false"</div> <!--   v-if="false" 整个元素 不存在 相当于 remove掉  -->
    <div v-show="true"> v-show="true"</div>
    <div v-show="false"> v-show="false"</div>  <!-- 如果是v-show:"false"  多个一个  display: none; 为不可见属性  -->

    <hr/>
    
    <!-- 在 插值表达式 实现 运算 -->
    补充：在 插值表达式 实现 运算 <br/>
      1+2={{ 1+2  }}  <br/>
      1-2={{ 1-2  }}  <br/>
      1*2={{ 1*2  }}  <br/>
      1/2={{ 1/2  }}  <br/>
      1%2={{ 1%2  }}  <br/>
      true||true={{ true||true  }}  <br/>
      true||false={{ true||false  }}  <br/>
      false||false={{ false||false  }}  <br/>
    

    <hr/>
    <!-- 可以使用三目运算符 -->
    {{ x>y?x:y }}

    <!-- {{ if(x>y){return x} }}  (×) -->

</template>


